/*
 * @Author: xiaobai123-4 1713951641@qq.com
 * @Date: 2025-03-25 15:34:55
 * @LastEditors: xiaobai123-4 1713951641@qq.com
 * @LastEditTime: 2025-04-01 11:18:39
 * @FilePath: \electronicBulletinBoard\src\App.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import * as React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import GlobalContext from './common/GlobalContext';

import { Container, Box, IconButton, ButtonGroup } from '@mui/material';

import SystemBar from './layout/SystemBar';
import HeaderBar from './layout/HeaderBar';

import HomeView from './views/Home/Index';
import FolderView from './views/Folder/Index';
import AboutView from './views/About/Index';
import SettingView from './views/Setting/Index';


export default function ClippedDrawer() {
  const [mode, setMode] = React.useState('light');

  const theme = createTheme({
    palette: {
      mode: mode,
    },
  });

  const toggleTheme = () => {
    setMode(prev => prev === 'light' ? 'dark' : 'light');
  };

  const [isActive, setIsActive] = React.useState('HomePage');

  const handleButtonClick = (active) => {
    setIsActive(active);
  };


  return (
    <GlobalContext.Provider value={{ mode, toggleTheme, theme }}>
      <ThemeProvider
        theme={theme}
      >
        <Box sx={{ width: '100%', height: '100%', bgcolor: 'background.default', display: 'flex' }}>
          {/* 侧边栏 */}
          <SystemBar active={isActive} onChange={handleButtonClick}></SystemBar>
          <Box sx={{ width: 'calc(100% - 40px)', height: '100%', display: 'flex', flexDirection: 'column' }}>
            {/* 头部 */}
            <HeaderBar></HeaderBar>
            {/* 内容 */}
            <Box sx={{
              width: '100%',
              height: '100%',
              bgcolor: 'divider',
              borderRadius: 2,
              overflow: 'auto',
              boxSizing: 'border-box',
              borderBottomWidth: '4px',
              borderBottomStyle: 'solid',
              borderBottomColor: 'background.default',
              borderRightWidth: '4px',
              borderRightStyle: 'solid',
              borderRightColor: 'background.default',
            }}>
              {
                isActive === 'HomePage' ? <HomeView /> :
                  (isActive === 'FolderPage' ? (<FolderView/>) : (
                    (isActive === 'AboutPage' ? (<AboutView/>) : (
                      (isActive === 'SettingPage' ? (<SettingView/>) : '')))))
              }
            </Box>
          </Box>
        </Box>
      </ThemeProvider >
    </GlobalContext.Provider>
  );
}